<template>
    <div style="position:relative; height:100%;  "  v-loading="$asyncComputed.tableData.updating">
        <span class="computeContainer" ref="textWidthComputeContainer">
         这个元素不用来显示,只用来计算文本宽度的
        </span>
        <LeftCenter :is-show-footer=true>
            <div slot="buttions">
                <el-button class="el-button--primary" size="mini" @click="$asyncComputed.tableData.update()">查询</el-button>
                <el-button size="mini">导出</el-button>
                <el-button size="mini">打印</el-button>
            </div>
            <el-form slot="queryCondition" label-width="80px" size="mini">
                <el-row>
                    <template v-for="fi of formItems">
                        <el-col style="position: relative"
                                :xl="reactiveLayout(24).xl"
                                :lg="reactiveLayout(24).lg"
                                :md="reactiveLayout(24).md"
                                :sm="reactiveLayout(24).sm"
                                :xs="reactiveLayout(24).xs">
                            <component :is="controllers.find(it=>it.id === 'input').component"
                                       :ref="`controller_${r"${fi.colName}"}`"
                                       v-model="listQuery[fi.colName]"
                                       :label="fi.colTitle"
                                       :config.sync="fi.config"
                                       :inited.sync="fi.inited"
                                       :context="formItems">
                            </component>
                        </el-col>
                    </template>
                </el-row>
            </el-form>
            <div slot="tableData" style="position:relative; height:100%; display: flex; flex-direction: column;">
                <el-table :data="dataSet"
                          style="flex-grow: 1"
                          border
                          height="100%"
                          stripe
                          fit

                          size="mini"
                          v-loading="$asyncComputed.tableData.updating"
                          @row-dblclick="(r,c,e)=>{drawDetail = true;detail=r;}"
                >
                    <el-table-column label="序号" type="index" width="50" align="center" v-if="tableColumn.length !=0"
                                     fixed></el-table-column>
                    <el-table-column v-for="fieldx in tableColumn" :prop="fieldx.value" :key="fieldx.value" :label="fieldx.label"
                                     :min-width="fieldx.width"
                                     :fixed="fieldx.fixed">
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination slot="footer"
                           @size-change="(size) => {listQuery.pageSize = size; listQuery.pageNo = 1}"
                           @current-change="(no) => {listQuery.pageNo = no}"
                           :current-page="listQuery.pageNo"
                           :page-sizes="[20, 40, 60, 80, 100]"
                           :page-size="listQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total=tableData.total>
            </el-pagination>
        </LeftCenter>
        <el-drawer title="详情"
                :visible.sync="drawDetail"
                @before-close="detail=null"
                direction="rtl">
            <el-form v-if="detail" >
            </el-form>
            <div v-else><h1>没找到数据！</h1></div>
        </el-drawer>
    </div>
</template>

<script>
    import LeftCenter from "../../layout/LeftCenter";
    import {fetchPageSetting} from '@/api/sys-page-settings';
    import {fetchPageList,fetchAllList,deleteEntity,createEntity,updateEntity,getEntity} from '@/api/${apiScriptFileName}';
    import controllers from "../custom/controllers";
    import {computeColWidth, reactiveLayout} from "../../../common/formatter";

    export default {
        name: "${apiScriptFileName}-list",
        components: {LeftCenter},
        data() {
            return {
                detail: null,
                startQuery:false,
                controllers: controllers,
                drawDetail: false,
                tableColumn: [],
                formItems: [],
                listQuery: {
                    pageSize: 20, // 每页数量
                    pageNo: 1,// 当前第几页
                    total: 0,
                }
            }
        },
        async created() {
            let pageSetting = await fetchPageSetting("${tableName}");
            if (pageSetting && pageSetting.data && pageSetting.data.pageConfig) {
                const pageConfig = JSON.parse(pageSetting.data.pageConfig);

                const pageFormItems = pageConfig.queryCondition;
                const tableFields = pageConfig.tableField;


                this.listQuery = Object.assign({},this.listQuery,pageFormItems.reduce((p,n)=>{p[n.colName] = n?.queryConfig?.defaultValue || '';return p},{}))
                this.formItems = pageFormItems;
                this.tableColumn = tableFields.map(c => ({
                    width: this.computeColWidth([c.colTitle]),
                    "label": c.colTitle,
                    "value": c.colName, ...JSON.parse(c.tableConfig)
                }));

            }
        },
        computed: {
            dataSet() {
                this.startQuery = false;
                if (this.tableData && this.tableData.list) {
                    return this.tableData.list;
                }
                return [];
            }
        },
        asyncComputed: {
            tableData: {
                async get() {
                    const rst = await fetchPageList(this.listQuery);
                    if (rst && rst.data) {
                        return rst.data;
                    }
                    return {
                        list: [],
                        total: 0
                    };
                }
                ,
                default() {
                    return {
                        list: [],
                        total: 0
                    }
                }
            }
        }
        ,
        methods: {
            reactiveLayout: reactiveLayout,
            computeColWidth: (t) => computeColWidth
        }
    }
</script>
